<template>
  <el-container>
    <!-- 查询结果作品列表 -->
    <el-card class="resultList" style="width: 85%">
      <el-table ref="filterTable" :data="checkWorkList" style="width: 100%" @row-click="openDetails">
        <el-table-column prop="img_url" label="预览" width="150">
          <template slot-scope="scope">
            <img v-if="scope.row.workType=='文档'" :src="GLOBAL_BASE_URL+'/digital-works/doc-image.png'" class="image">
            <img v-if="scope.row.workType=='图像'" :src="GLOBAL_BASE_URL+'/' + scope.row.workAddress" class="image">
            <!-- <img v-if="scope.row.workType=='文档'" src="http://localhost:8080/digital-works/doc-image.png" class="image"> -->
            <!-- <img v-if="scope.row.workType=='图像'" :src="'http:\\\\localhost:8080\\' + scope.row.workAddress" class="image"> -->
          </template>
        </el-table-column>
        <el-table-column prop="workName" label="作品名称" :formatter="formatter">
        </el-table-column>
        <el-table-column prop="authorName" label="作者" width="120">
        </el-table-column>
        <el-table-column prop="workTime" label="上传时间" sortable width="120" column-key="date">
        </el-table-column>
        <el-table-column prop="workType" label="类型" width="120"
          :filters="[{ text: '图像', value: '图像' }, { text: '文档', value: '文档' }]" :filter-method="filterTag"
          filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag :type="scope.row.workType === '图像' ? 'primary' : 'success'" disable-transitions>{{scope.row.workType}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="workStatus" label="状态" width="120"
          :filters="[{ text: '已通过', value: '已通过' }, { text: '未通过', value: '未通过' }, { text: '待审核', value: '待审核' }]"
          :filter-method="filterHandler">
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @current-change="handleCurrentChange" :current-page="queryInfo.pageindex"
        :page-size="queryInfo.pagesize" layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      GLOBAL_BASE_URL: this.GLOBAL.BASE_URL,
      // 获取作品列表的参数对象
      queryInfo: {
        query: '',
        pageindex: 1,
        pagesize: 5
      },
      checkWorkList: [], // 把获取到的其他作品列表放在这里
      total: 4 // 总数据条数
    }
  },
  created () {
    // 发起当前组件的首页数据请求
    this.getCheckWorkList()
  },
  methods: {
    getCheckWorkList () {
      // console.log('获取数据')
      this.$axios.get('/admin/getCheckWorkList', {
        params: {
          pageindex: this.queryInfo.pageindex,
          pagesize: this.queryInfo.pagesize
        }
      }).then(res => {
        console.log(res)
        this.checkWorkList = res.data.data
        this.total = res.data.total
      }).catch(err => {
        if (err.response) {
          console.log(err.response.status)
          if (err.response.status === 404) {
            alert('客户端请求出现问题')
          } else if (err.response.status >= 500) {
            alert('服务端接口出现问题')
          }
        } else if (err.request) { // 请求已经发起但没有响应，需要配合后端实现的错误处理
          console.error(err.request)
        } else { // 请求没有发起，也没有响应，需要配合后端实现的错误处理
          console.error(err.message)
        }
      })
    },
    // 格式化返回作品名字
    formatter (row, column) {
      return row.workName
    },
    // 格式化返回作品描述
    formatterDesc (row, column) {
      return row.workDescription.substring(0, 20) + '...'
    },
    filterTag (value, row) {
      return row.workType === value
    },
    filterStatus (value, row) {
      return row.workStatus === value
    },
    filterHandler (value, row, column) {
      const property = column.property
      return row[property] === value
    },
    // 监听表格行，跳到作品详情
    openDetails (row, event, column) {
      console.log(row)
      const id = 'admin'
      if (row.workType === '图像') {
        const type = 'img'
        this.$router.push('/checkdetails/' + id + '/' + type + '/' + row.workId)
      }
      if (row.workType === '文档') {
        const type = 'txt'
        this.$router.push('/checkdetails/' + id + '/' + type + '/' + row.workId)
      }
    },

    // 监听页码值改变的事件
    handleCurrentChange (newPage) {
      console.log(newPage)
      this.queryInfo.pageindex = newPage
      this.getCheckWorkList()
    }
  }
}
</script>

<style lang="less" scoped>
.el-container {
  display: flex;
  justify-content: center;
}
.el-table img {
  position: relative;
  width: 60px;
  height: 60px;
}

  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }

  .clearfix:after {
      clear: both
  }
</style>
